<script setup lang="ts">import { onMounted, ref } from 'vue';
type messageType='success' | 'error' | 'warning'
const isShow=ref(false)
onMounted(()=>{
  isShow.value=true
})
const {type}= defineProps<{
  type:messageType
}>()

const style = {
  warning: {
    icon: 'icon-warning',
    color: '#E6A23C',
    backgroundColor: 'rgb(253, 246, 236)',
    borderColor: 'rgb(250, 236, 216)',
  },
  error: {
    icon: 'icon-shanchu',
    color: '#F56C6C',
    backgroundColor: 'rgb(254, 240, 240)',
    borderColor: 'rgb(253, 226, 226)',
  },
  success: {
    icon: 'icon-queren2',
    color: '#67C23A',
    backgroundColor: 'rgb(240, 249, 235)',
    borderColor: 'rgb(225, 243, 216)',
  },
}
</script>

<template>
  <Transition name="down">
    <div class="box" v-if="isShow">
    <div :style="style[type]"  class="content"><slot/></div>
  </div>
  </Transition>
</template>

<style lang="less" scoped>
.down-enter-from{
  transform: translateY(-60px);
}
.down-enter-active{
  transition: all 0.5s;
}
.box {
  display: flex;
  height: 100px;
}
.content {
  
  text-align: center;
  width: 200px;
  height: 40px;
  line-height: 40px;
  justify-content: center;
  // background-color: skyblue;
  margin: 0 auto;
}
</style>
